<template>
	<view>
		<view style=" margin-bottom: 190rpx;">
			<!-- 优惠券循环 -->
			<view :class="'gui-card-view gui-margin-top gui-box-shadow gui-border-radius'" style="margin: 40rpx;"
				:style="{background: item.img ? 'url('+item.img+') 100% 100%/100% 100%' : get_back(index,item) + ' 100% 100%/100% 100%'}"
				v-for="(item,index) in products2" :key="index">
				<view class="gui-card-body gui-flex gui-rows gui-nowrap gui-border-radius" style="height: 200rpx;">
					<view class="gui-card-desc">
						<view class="gui-flex gui-rows gui-nowrap gui-align-items-center">
							<text v-if="item.coupon" class="gui-h2"
								style="text-align: center;color: white;height: 160rpx;">{{item.coupon.img ? "" : item.coupon.name}}</text>
							<text v-else class="gui-h2"
								style="text-align: center;color: white;height: 160rpx;">{{item.img ? "" : "已下架"}}</text>
						</view>
						<view style="margin-top: 15rpx;"></view>
					</view>
				</view>

				<!-- <view v-if="item.hasOwnProperty('coupon')" class="gui-text-center gui-color-yellow"
					style="font-weight: bold;">
					<text v-if="item.coupon.star_time || item.coupon.end_time"
						style=" color: black;width: 100%;font-size: 30rpx; ">
						{{item.coupon.star_time.split(" ")[0]}} 至 {{item.coupon.end_time.split(" ")[0]}}</text>
				</view>
				<view v-else class="gui-text-center gui-color-yellow " style="font-weight: bold;">
					<text v-if="item.star_time || item.end_time" style="color: black;width: 100%;font-size: 30rpx;">
						{{item.star_time.split(" ")[0]}} 至 {{item.end_time.split(" ")[0]}}</text>
				</view> -->
				<!-- 有coupon的是获得的卡券记录（business_member_coupon表）,没有的是全员都有的卡券，直接返的卡券，并非记录（business_coupon表）并且无是否使用 -->
				<view v-if="card_cut == '1'" style="margin-top: 50rpx;">
					<!-- gui-card-footer -->
					<view v-if="item.hasOwnProperty('coupon')" class="gui-rows gui-nowrap gui-space-around"
						style="display: flex;">
						<button v-if="item.coupon && item.status != '1'" :disabled="item.log_count>=item.coupon.limit"
							class="btn_cp"
							@tap="get_coupon_code(item.coupon.id, item.coupon.code, item.id, item.star_time, item.coupon.end_time, item.business_id, item.coupon.name)">查看二维码</button>
						<button v-else class="btn_cp">已使用</button>
						<button v-if="item.id != 0" class="btn_cp" @tap="to_info(item.coupon)">活动详情</button>

						<view class="gui-color-yellow gui-h4"><text
								style=" color: white; font-size: 30rpx; margin-right: 10rpx;;">已用:{{item.log_count?item.log_count:0}}/{{item.coupon.limit}}次</text>
						</view>
					</view>
					<!-- gui-card-footer -->
					<view v-else class="gui-flex gui-rows gui-nowrap gui-space-around gui-align-items-center">
						<button size="mini" class="btn_cp" :disabled="item.log_count==1"
							@tap="get_coupon_code(item.id,item.code,0,item.star_time,item.end_time)">领取优惠券</button>
						<button v-if="item.id != 0" class="btn_cp" @tap="to_info(item)">活动详情</button>
						<view class="gui-color-yellow gui-h4">
							<!-- <text style=" color: white; font-size: 30rpx; margin-right: 10rpx;;">已用:{{item.log_count?item.log_count:0}}/{{item.coupon.limit?item.coupon.limit:0}}次</text> -->
						</view>
					</view>
				</view>

				<view v-else class="">
					<view v-if="item.hasOwnProperty('coupon')"
						class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"
						style='padding-bottom: 20rpx;'>
						<text v-if="item.coupon && item.status != '1'"
							class="gui-icons gui-card-footer-item gui-border-r gui-color-white gui-border-radius gui-padding"
							@tap="get_coupon_code(item.coupon.id,item.coupon.code,item.id,item.coupon.star_time,item.coupon.end_time)">领取券码</text>
						<text v-else
							class="gui-icons gui-card-footer-item gui-border-r gui-color-red gui-border-radius">已使用</text>
						<text v-if="item.id != 0"
							class="gui-icons gui-card-footer-item gui-color-white gui-border-radius"
							@tap="to_info(item.coupon)">活动详情</text>
					</view>
					<view v-else
						class="gui-card-footer gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center"
						style='padding-bottom: 20rpx;'>
						<text class="gui-icons gui-card-footer-item gui-border-r gui-color-white gui-border-radius"
							@tap="get_coupon_code(item.id,item.code,0,item.star_time,item.end_time)">领取券码</text>
						<text v-if="item.id != 0"
							class="gui-icons gui-card-footer-item gui-color-white gui-border-radius"
							@tap="to_info(item)">活动详情</text>
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center; color:  rgba(0, 0, 0, 0.6);" v-if="products2.length <= 0">{{text}}</view>
		<gui-popup ref="guipopup1" :canCloseByShade="false">
			<view style="width: 90%; height: 550rpx; background-color: white; margin: 0 auto; border-radius: 15rpx;">
				<view style="height: 40rpx;"></view>
				<canvas v-if="qrcode_text != ''" canvas-id="canvas" id="canvas"
					style="width:360rpx; height:360rpx; margin: 0 auto;" @longpress="saveQrcode"></canvas>
				<view style="text-align: center; font-size: 30rpx; font-weight: bold; margin-top: 25rpx;">
					{{commodityName}}
				</view>
				<button type="default" @click="close1">关闭</button>
			</view>
		</gui-popup>

		<menuBar menu_index="1" />

	</view>
</template>

<script>
	import QRCode from '@/Grace6/js/qrcode.js';
	import menuBar from './menu_bar.vue';
	export default {
		components: {
			menuBar
		},
		data() {
			return {
				products2: [],
				user: uni.getStorageSync("member"),
				coupon_type: 1,
				card_cut: 1,
				commodityName: '',
				qrcode_text: '',
				qrcode: null,
				// 二维码尺寸，单位 rpx
				qrcodeSize: 360,
				// 二维码数据
				qrcodeContent: 'https://',
				// 二维码背景颜色
				qrcodeBgColor: '#FFFFFF',
				// 二维码颜色
				qrcodeColor: '#008AFF',
				// 画布 id
				qrcodeId: 'canvas',
				text: '加载中。。。',
			}
		},
		onLoad() {
			this.get_all_coupon();
		},
		methods: {
			get_all_coupon() {
				let self = this;
				uni.showLoading({
					title: '请求中...'
				});
				console.log('get_all_coupon')
				this.$boya.NPost("/app/card_bag/get_all_coupon", {
					type: self.coupon_type,
				}, function(res) {
					if (res.data.length == 0) {
						self.isEmpty = true
					} else {
						self.isEmpty = false
					}
					if (self.coupon_type == 1) {
						self.products2 = res.data;
						uni.setStorageSync("coupon", self.products2);
					}
					console.log('优惠券: ', res.data);
					if (self.products2.length <= 0) {
						self.text = '暂无数据'
					}
					uni.hideLoading();
				}, null, {
					showLoading: false
				});
			},
			//无背景图，匹配背景图
			get_back(index, item) {
				if (item.hasOwnProperty('coupon')) {
					if (item.coupon && item.coupon.img) {
						return "url(" + item.coupon.img + ")";
					}
				}
				index = index % 3;
				//没有背景图下方随机背景
				if (index == 1) {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/62vzEphp9a12kC1652077538220509.png)';
				} else if (index == 2) {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/9vMlcphpu9hwlK1652077280220509.png)';
				} else {
					return 'url(http://boyaltd.oss-cn-hangzhou.aliyuncs.com/2022-05/09/DadewphpK5YBnQ1652064063220509.png)';
				}
			},
			// 优惠券活动详情
			to_info(coupon) {
				console.log('to_info-coupon: ', coupon);
				if (coupon) {

					if (coupon.activity_img) {

						uni.navigateTo({
							// url: "./card_info?img=" + coupon.activity_img
							url: "/pages/card/card_info?img=" + coupon.activity_img
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '暂无活动详情'
						});
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '该卡券已下架'
					});
				}
			},
			open1: function() {
				this.$refs.guipopup1.open();
			},
			// 关闭二维码弹窗
			close1: function() {
				this.$refs.guipopup1.close();
			},

			//二维码获取
			get_coupon_code(id, code, c_id, s_time, e_time, b_id, name) {
				this.commodityName = name
				// console.log('commodityName:', this.commodityName);
				console.log('id：', id);
				let nowDate = new Date();
				// star_time
				if (s_time) {
					let s_time_date = new Date(s_time);
					if (s_time_date > nowDate) {
						uni.showModal({
							title: '提示',
							content: '当前项目还未开始 : ' + s_time
						});
						return;
					}
				}
				if (e_time) {
					// console.log('e_time: ', e_time);
					let e_time_date = new Date(e_time);
					// console.log('shijian: ', e_time_date);
					// console.log('nowDate: ', nowDate);
					if (e_time_date < nowDate) {
						uni.showModal({
							title: '提示',
							content: '当前项目已经结束 : ' + e_time
						});
						return;
					}
				}
				if (c_id == 0) {
					console.log('领取优惠券: ', c_id);
					//用户领取优惠券
					let self = this;
					// uni.showLoading({
					// 	title: "领取优惠券..."
					// })
					this.$boya.NPost("/app/card_bag/member_get_coupon", {
						member_id: this.user.id,
						coupon_id: id,
						idNo: this.user.idNo
					}, function(res) {
						if (res.code == 200) {
							console.log('resresresresresres: ', res);
							id = id + "," + res.data.id;
							// self.open1();

							// let code_re = code.replaceAll("-", "|");
							let code_re = code.replace(/-/g, "|");
							self.qrcode_text = code_re + "-" + id + "-" + self.user.id;
							console.log(self.qrcode_text, 'ewm');
							setTimeout(self.show_qrcode, 500);
							uni.showModal({
								title: '提示',
								content: '领取成功',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										self.get_all_coupon()
									}
								}
							});
							console.log('成功成功成功成功');
							// uni.hideLoading();
						} else {
							uni.showToast({
								title: res.msg
							});
						}
					});
					return;
				} else {
					id = id + "," + c_id;
				}
				// 强制签名
				// if (b_id == 85) {
				// 	let self = this
				// 	if (self.sign == null) {
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '请签名确认，确认后方可查看二维码',
				// 			showCancel: false,
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					uni.navigateTo({
				// 						url: '/pages/member/f-signature?list=' + 1
				// 					})
				// 				} else if (res.cancel) {
				// 					console.log('用户点击取消');
				// 				}
				// 			}
				// 		});
				// 	} else {
				// 		self.open1();
				// 		console.log(self.user)
				// 		if (self.user) {
				// 			console.log('数据：', code);
				// 			// code.replaceAll("-", "|")
				// 			let code_re = code.replace(/-/g, "|");
				// 			self.qrcode_text = code_re + "-" + id + "-" + self.user.id;
				// 			console.log(self.qrcode_text, 'ewm');
				// 			setTimeout(self.show_qrcode, 500);
				// 		} else {
				// 			uni.showToast({
				// 				title: '无用户信息1!',
				// 				icon: "error"
				// 			});
				// 		}
				// 	}
				// } else {
				this.open1();
				console.log(this.user)

				console.log('数据：', code);
				// code.replaceAll("-", "|")
				let code_re = code.replace(/-/g, "|");
				this.qrcode_text = code_re + "-" + id + "-" + this.user.id;
				console.log(this.qrcode_text, 'ewm');
				setTimeout(this.show_qrcode, 500);
				// }
			},
			show_qrcode() {
				let self = this;
				let text = this.qrcode_text;
				// console.log(text,'texxxxx');
				this.qrcode = new QRCode(this.qrcodeId, {
					text: text,
					width: uni.upx2px(this.qrcodeSize),
					height: uni.upx2px(this.qrcodeSize),
					colorDark: this.qrcodeColor,
					colorLight: this.qrcodeBgColor,
					correctLevel: QRCode.CorrectLevel.H
				});
			},
			saveQrcode() {

			},
		}
	}
</script>

<style>
	/* 优惠券卡片样式 */
	.card-wrapper {
		position: relative;
		width: 100%;
		/* 卡片宽度 */
		height: 150px;
		/* 卡片高度 */
	}

	.card1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.card-front {
		background-color: #fff;
		z-index: 2;
		/* 前面的卡片在上层 */
	}

	.card-back {
		background-color: #f1f1f1;
		z-index: 1;
		/* 后面的卡片在下层 */
		transform: translateY(80rpx);
		/* 后面的卡片向下偏移一定距离 */
	}

	.card-botton {
		position: absolute;
		bottom: 0;
	}

	.btn_cp {
		border-radius: 10rpx;
		background-color: #008AFF;
		color: #ffffff;
		line-height: 50rpx;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}

	/* ---end--- */
</style>